<!DOCTYPE html>
<html>

<head>
    <script src="ispace_rscm/index.js"></script>
    <title>登录</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">  
    <script src="login.js"></script>
    <script src="core.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .container {
            width: 420px;
            margin: 0 auto;
            padding: 50px 40px 45px;
            border: 1px solid #ccc;
            border-radius: 5px;
            
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            transform: translateY(-10%); 
        }

        .container h1 {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
        }
        .btn_area {
            display: flex;
            justify-content: space-between; 
            margin-top: 20px;
        } 
        .btn {
            width: 48%;   
        }

        md-outlined-text-field {
            width: 100%;
            margin: 16px 0;
        }
  
        /* container 上下左右居中显示 */
        body {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            height: 95vh;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>我的空间</h1> 
        <md-outlined-text-field  type="input" id="username" name="username" label="账号" ></md-outlined-text-field> 
        <md-outlined-text-field type ="password"  id="password" name="password" label="密码"></md-outlined-text-field> 
        <div class="btn_area">
        <md-filled-button  type="button"  class="btn"  color="red"  onclick="reset()">重置</md-filled-button>
        <md-filled-button  type="button"  class="btn" onclick="login()">登录</md-filled-button>
        </div>
    </div>
    <script>
        // 重置函数
        function reset() {
            document.getElementById("username").value = "";
            document.getElementById("password").value = "";
        }
        // 登录函数
        function login() {
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;
            var returnUrl = getUrlParameter("returnUrl");

            ispace.auth.login(username, password).subscribe(s => {
                if (s) {

                    if (!s.success) {
                        alert(s.message);
                        return;
                    }

                    var token = ispace.auth.getLocalToken();
                    if (returnUrl) {
                        window.location.href = returnUrl;
                    } else {
                        window.location.href = "/index.html";
                    }
                }
            })

        }

        function getUrlParameter(name) {
            name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
            var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
            var results = regex.exec(location.search);
            return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
        }
    </script>
</body>

</html>